<template>
  <el-card class="home_table">
    <!-- 查询内容 -->
    <div slot="header" class="clearfix">
      <el-form
        size="small"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <!-- 岗位名称 -->
        <el-form-item label="岗位名称">
          <el-input
            v-model="formInline.postName"
            placeholder="请输入岗位名称"
          ></el-input>
        </el-form-item>
        <!-- 岗位状态 -->
        <el-form-item label="岗位状态">
          <el-select v-model="formInline.postStatus" placeholder="岗位状态">
            <el-option label="在 线" value="在 线"></el-option>
            <el-option label="不在线" value="不在线"></el-option>
          </el-select>
        </el-form-item>
        <!-- 时间范围 -->
        <el-form-item>
          <el-date-picker
            v-model="formInline.updateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          ></el-date-picker>
        </el-form-item>
        <!-- 查询 -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
        <!-- 刷新 -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="reset"
            style="
              background-color: rgba(247, 165, 74);
              border: 2px solid rgba(247, 165, 74);
            "
            >刷新</el-button
          >
        </el-form-item>
        <!-- 新增 -->
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            @click="dialogFormVisible = true"
            >添加新记录</el-button
          >
        </el-form-item>
        <!-- 批量删除 -->
        <el-form-item>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            :disabled="disabled"
            @click="deleteData"
            >批量删除</el-button
          >
        </el-form-item>
        <!-- 编辑 -->
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            :disabled="edit"
            @click="handleEdit"
            >编辑</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div style="height: calc(100vh - 186px)">
      <el-table
        :data="tableData"
        height="100%"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          textAlign: 'center',
          background: '#587ab3',
          color: '#ffffff',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="stationNumber"
          label="岗位编号"
        ></el-table-column>
        <el-table-column prop="postName" label="岗位名称"></el-table-column>
        <el-table-column
          prop="postStatus"
          label="岗位状态"
          width="110"
          sortable
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.postStatus == '在 线' ? 'primary' : 'danger'"
            >
              {{ scope.row.postStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="workstation"
          label="工位"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="equipmentName"
          label="设备名称"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="equipmentModel"
          label="设备型号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改日期"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="updateBy"
          label="修改人"
          width="100"
        ></el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      style="text-align: right"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 5, 7, 10, 20]"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog
      title="添加记录信息"
      :visible.sync="dialogFormVisible"
      style="width: 80%; margin: auto"
    >
      <el-form label-width="120px">
        <!-- 岗位ID -->
        <el-form-item label="岗位ID">
          <el-input
            style="width: 100%"
            v-model="form.id"
            placeholder="岗位ID"
          ></el-input>
        </el-form-item>
        <!-- 岗位编号 -->
        <el-form-item label="岗位编号">
          <el-input
            style="width: 100%"
            v-model="form.stationNumber"
            placeholder="岗位编号"
          ></el-input>
        </el-form-item>
        <!-- 岗位名称 -->
        <el-form-item label="岗位名称">
          <el-input
            style="width: 100%"
            v-model="form.postName"
            placeholder="岗位名称"
          ></el-input>
        </el-form-item>
        <!-- 岗位状态 -->
        <el-form-item label="岗位状态">
          <el-select
            style="width: 100%"
            v-model="form.postStatus"
            placeholder="岗位状态"
          >
            <el-option label="在 线" value="在 线"></el-option>
            <el-option label="不在线" value="不在线"></el-option>
          </el-select>
        </el-form-item>
        <!-- 工位 -->
        <el-form-item label="工位">
          <el-input
            style="width: 100%"
            v-model="form.workstation"
            placeholder="工位"
          ></el-input>
        </el-form-item>
        <!-- 设备名称 -->
        <el-form-item label="设备名称">
          <el-input
            style="width: 100%"
            v-model="form.equipmentName"
            placeholder="设备名称"
          ></el-input>
        </el-form-item>
        <!-- 设备型号 -->
        <el-form-item label="设备型号">
          <el-input
            style="width: 100%"
            v-model="form.equipmentModel"
            placeholder="设备型号"
          ></el-input>
        </el-form-item>
        <!-- 修改日期 -->
        <el-form-item label="修改日期">
          <el-date-picker
            style="width: 100%"
            v-model="form.updateTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <!-- 修改人 -->
        <el-form-item label="修改人">
          <el-input
            style="width: 100%"
            v-model="form.updateBy"
            placeholder="修改人"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="addNew">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改订单信息"
      :visible.sync="editFormVisiable"
      style="width: 80%; margin: auto"
    >
      <el-form label-width="120px">
        <!-- 岗位ID -->
        <el-form-item label="岗位ID">
          <el-input
            style="width: 100%"
            v-model="editForm.id"
            placeholder="岗位ID"
          ></el-input>
        </el-form-item>
        <!-- 岗位编号 -->
        <el-form-item label="岗位编号">
          <el-input
            style="width: 100%"
            v-model="editForm.stationNumber"
            placeholder="岗位编号"
          ></el-input>
        </el-form-item>
        <!-- 岗位名称 -->
        <el-form-item label="岗位名称">
          <el-input
            style="width: 100%"
            v-model="editForm.postName"
            placeholder="岗位名称"
          ></el-input>
        </el-form-item>
        <!-- 岗位状态 -->
        <el-form-item label="岗位状态">
          <el-select
            style="width: 100%"
            v-model="editForm.postStatus"
            placeholder="岗位状态"
          >
            <el-option label="在 线" value="在 线"></el-option>
            <el-option label="不在线" value="不在线"></el-option>
          </el-select>
        </el-form-item>
        <!-- 工位 -->
        <el-form-item label="工位">
          <el-input
            style="width: 100%"
            v-model="editForm.workstation"
            placeholder="工位"
          ></el-input>
        </el-form-item>
        <!-- 设备名称 -->
        <el-form-item label="设备名称">
          <el-input
            style="width: 100%"
            v-model="editForm.equipmentName"
            placeholder="设备名称"
          ></el-input>
        </el-form-item>
        <!-- 设备型号 -->
        <el-form-item label="设备型号">
          <el-input
            style="width: 100%"
            v-model="editForm.equipmentModel"
            placeholder="设备型号"
          ></el-input>
        </el-form-item>
        <!-- 修改日期 -->
        <el-form-item label="修改日期">
          <el-date-picker
            style="width: 100%"
            v-model="editForm.updateTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <!-- 修改人 -->
        <el-form-item label="修改人">
          <el-input
            style="width: 100%"
            v-model="editForm.updateBy"
            placeholder="修改人"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editFormVisiable = false"
          >取 消</el-button
        >
        <el-button size="small" :plain="true" type="primary" @click="submitEdit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      // 初始查询表单
      formInline: {
        personnelName: "",
        status: [],
        updateTime: [],
      },
      // 查询表单
      searchForm: {
        postName: "",
        postStatus: [],
        updateTime: [],
      },
      tableData: [],
      currentPage: 1, //当前页
      pageSize: 12, //每页条数
      total: 0, //总条数
      multipleSelection: [], //选中的数据
      post: [], //存入本地记录
      dialogFormVisible: false, //新增弹框
      // 新增表单
      form: {
        postName: "",
        postStatus: [],
        updateTime: "",
      },
      editFormVisiable: false, //编辑弹框
      // 编辑表单
      editForm: {
        postName: "",
        postStatus: [],
        updateTime: "",
      },
      disabled: true, //删除禁用
      edit: true, //编辑禁用
    };
  },
  created() {
    this.showList();
  },
  methods: {
    // 渲染数据
    showList() {
      if (JSON.parse(window.localStorage.getItem("post"))) {
        this.post = JSON.parse(window.localStorage.getItem("post"));
        this.tableData = [...this.post]; //渲染数组
        this.total = this.post.length; //数据总条数
        this.changePage(this.post); //进入页面返回到第一页
      }
    },
    // 查询
    onSubmit() {
      this.currentPage = 1; //回到第一页
      this.searchData = []; //初始化搜索数据
      this.searchForm = { ...this.formInline };
      if (this.searchForm.postName) {
        //如果搜索对象中equipmentCode存在
        this.searchData = this.post.filter((item) =>
          item.postName.match(this.searchForm.postName)
        );
        this.total = this.searchData.length;
        this.changePage(this.searchData);
        if (this.searchForm.postStatus) {
          //如果搜索对象中equipmentStatus存在
          this.searchStatus(this.searchData);
          if (this.searchForm.updateTime && this.searchForm.updateTime.length) {
            //如果搜索对象中time存在
            this.searchTime(this.searchData);
          }
        } else if (
          this.searchForm.updateTime &&
          this.searchForm.updateTime.length
        ) {
          //如果搜索对象中time存在
          this.searchTime(this.searchData);
        }
      } else if (this.searchForm.postStatus) {
        //如果搜索对象中equipmentStatus存在
        this.searchStatus(this.post);
        if (this.searchForm.updateTime && this.searchForm.updateTime.length) {
          //如果搜索对象中time存在
          this.searchTime(this.searchData);
        }
      } else if (
        this.searchForm.updateTime &&
        this.searchForm.updateTime.length
      ) {
        //如果搜索对象中time存在
        this.searchTime(this.post);
      } else {
        //如果搜索对象为空
        this.showList();
      }
      // this.formInline = {};
    },
    // 查询状态
    searchStatus(obj) {
      this.searchData = obj.filter((item) =>
        item.postStatus.match(this.searchForm.postStatus)
      );
      this.total = this.searchData.length; //搜索结果数据总条数
      this.changePage(this.searchData); //传入渲染
    },
    // 查询时间
    searchTime(obj) {
      let beforeTime = new Date(this.searchForm.updateTime[0]).getTime(); //查询时间范围下限
      let afterTime = new Date(this.searchForm.updateTime[1]).getTime(); //查询时间范围上限
      this.searchData = obj.filter(
        (item) =>
          beforeTime <= new Date(item.updateTime).getTime() &&
          new Date(item.updateTime).getTime() <= afterTime
      );
      this.total = this.searchData.length; //搜索数据总条数
      this.changePage(this.searchData); //传入渲染
    },
    //刷新
    reset() {
      this.reload();
    },
    // 增加
    addNew() {
      this.post.unshift(this.form);
      this.post.sort((a, b) => {
        return (
          new Date(b.updateTime).getTime() - new Date(a.updateTime).getTime()
        );
      }); //降序
      window.localStorage.setItem("post", JSON.stringify(this.post));
      this.form = {};
      this.dialogFormVisible = false;
      this.showList();
    },
    //多选删除
    deleteData() {
      this.$confirm(
        "此操作将永久删除 " +
          this.multipleSelection.length +
          " 个用户, 是否继续?",
        "提示",
        { type: "warning" }
      )
        .then(() => {
          this.multipleSelection.forEach((item) => {
            console.log(item);
            const index = this.post.indexOf(item);
            this.post.splice(index, 1);
            window.localStorage.setItem("post", JSON.stringify(this.post));
          });
          this.multipleSelection = [];
          this.currentPage = 1;
          this.showList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message("已取消操作!");
        });
    },
    // 编辑
    handleEdit(row) {
      this.editFormVisiable = true;
      this.editForm = this.multipleSelection[0];
      // this.editForm = { ...row };
    },
    // 确认编辑
    submitEdit() {
      this.editFormVisiable = false;
      this.post[this.post.indexOf(this.rowItem)] = this.editForm;
      this.post.sort((a, b) => {
        return (
          new Date(b.updateTime).getTime() - new Date(a.updateTime).getTime()
        );
      }); //降序
      window.localStorage.setItem("post", JSON.stringify(this.post));
      this.showList();
      this.$message({
        message: "恭喜你，修改成功",
        type: "success",
      });
    },
    //选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
      if (this.multipleSelection.length == 0) {
        this.disabled = true;
        this.edit = true;
      } else if (this.multipleSelection.length == 1) {
        this.edit = false;
        this.disabled = false;
      } else {
        this.edit = true;
        this.disabled = false;
      }
    },
    //选中行变色
    tableRowClassName({ row, rowIndex }) {
      let arr = this.multipleSelection.map((item) => item.id);
      for (let i = 0; i < arr.length; i++) {
        if (row.id === arr[i]) {
          return "rowStyle";
        }
      }
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val; //当前页
      //如果查询数据存在，则渲染查询数据
      if (this.searchData.length) {
        this.changePage(this.searchData);
      } else {
        this.changePage(this.record); //不存在则渲染全部数据
      }
    },
    // 分页显示
    changePage(obj) {
      const n = (this.currentPage - 1) * this.pageSize; //需要跳过的条数
      this.tableData = obj.slice(n, n + this.pageSize);
    },
  },
};
</script>

<style lang="scss">
.home_table {
  height: 100%;
  border-radius: 10px;
  background-color: #587ab3;
  border: 0;
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0px;
  } /* table选中高亮 */
  .rowStyle {
    color: rgb(28, 235, 211) !important;
    background: rgb(36 52 93) !important;
  }
  .el-table__body-wrapper {
    background-color: #445e89e6;
  }
  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    // border: 0;
    border: 1px solid #587ab3;
  }

  .el-table::before {
    height: 0px;
  }
  /* 悬停划过高亮，鼠标经过，当前行的颜色 */
  .el-table__body tr:hover > td {
    background-color: rgb(36 52 93)  !important;
    color: rgb(28, 235, 211);
  }
  .el-form-item--small .el-form-item__content,
  .el-form-item--small .el-form-item__label {
    color: white;
  }
  .el-card__header {
    border-bottom: 4px solid #364662;
  }
  .el-card__body,
  .el-main {
    padding: 0px;
  }
  .el-table--border,
  .el-table--group {
    border: 0px solid #ebeef5;
  }
  .el-pagination__total {
    margin-right: 10px;
    font-weight: 400;
    color: white;
  }
  .el-pagination__jump {
    margin-left: 24px;
    font-weight: 400;
    color: white;
  }
}
.home_table .el-table__body tr:nth-child(even) {
  background-color: #3c5276;
  color: white;
}
.home_table .el-table__body tr:nth-child(odd) {
  background-color: #445e89;
  color: white;
}
</style>
